import 'package:flutter/material.dart';
import 'package:flutter_demo/pages/page_with_title.dart';

import '../../../widgets/app_widgets.dart';

class SizePage extends PageWithTitle {
  const SizePage({super.key})
      : super(
            "尺寸组件(SizedBox、LimitedBox、ConstrainedBox、UnconstrainedBox、AspectRatio、FractionallySizedBox)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("我们在布局ui时，经常需要对组件的宽高进行设置"),
      AppSpacer.large,
      _SizedExample(),
      UlItem("SizedBox"),
      BodyText("尺寸盒子，设置组件的宽高，当未设置尺寸时自适应子组件尺寸，double.infinity用"
          "于占据所有父组件空间"),
      LabelText("- width 组件宽度"),
      LabelText("- height 组件高度"),
      AppSpacer.large,
      _LimitedExample(),
      UlItem("LimitedBox"),
      BodyText("限制盒子，设置组件的宽度或高度不受限制时（例如在Row Column中），启用限制"),
      LabelText("- maxWidth 组件的宽度不受限时，限制最大宽度"),
      LabelText("- maxHeight 组件高度高度不受限时，限制最大高度"),
      AppSpacer.large,
      _ConstrainedExample(),
      UlItem("ConstrainedBox"),
      BodyText("约束盒子，除非硬性指定了尺寸，否则不管何种情况下，都会约束组件的最大最小宽高"),
      LabelText("- constraints 约束设置"),
      LabelText("  - minWidth 限制最小宽度"),
      LabelText("  - maxWidth 限制最大宽度"),
      LabelText("  - minHeight 限制最小高度"),
      LabelText("  - maxHeight 限制最大高度"),

      AppSpacer.large,
      _UnconstrainedExample(),
      UlItem("UnconstrainedBox"),
      BodyText("对子组件无任何尺寸约束的盒子，子组件尺寸可以超出容器大小"),

      AppSpacer.large,
      _AspectRatioExample(),
      UlItem("AspectRatio"),
      BodyText("宽高比组件，根据固定宽度或高度、按照比例计算另一维度数据（ListView中强制item"
          "宽度填满列表，所以这里宽度已经确定，根据比例计算出高度）"),
      LabelText("- aspectRatio 宽高比"),

      AppSpacer.large,
      _FractionallySizeExample(),
      UlItem("FractionallySizedBox"),
      BodyText("百分比组件，指定组件宽度或高度占父组件的比例"),
      NoticeText("注意：要设置比例，必须确保父组件对应属性是确定的"),
      LabelText("- widthFactor 宽度比例"),
      LabelText("- heightFactor 宽度比例"),
      LabelText("- alignment 对齐效果"),
      // FractionallySizedBox
    ];
  }
}

class _FractionallySizeExample extends StatelessWidget {
  const _FractionallySizeExample();

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 0.5,
      alignment: AlignmentDirectional.centerStart,
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: ColoredBox(
          color: Theme.of(context).colorScheme.primary,
        ),
      ),
    );
  }
}

class _AspectRatioExample extends StatelessWidget {
  const _AspectRatioExample();

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Container(
        height: 40,
        color: Theme.of(context).colorScheme.primary,
      ),
    );
  }
}

class _UnconstrainedExample extends StatelessWidget {
  const _UnconstrainedExample();

  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child: Container(
        width: 400,
        height: 40,
        color: Theme.of(context).colorScheme.primary,
      ),
    );
  }
}

class _SizedExample extends StatelessWidget {
  const _SizedExample();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 40,
          child: ColoredBox(
            color: Theme.of(context).colorScheme.primary,
            child: Text(
              "wrap width",
              style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
            ),
          ),
        ),
        AppSpacer.mini,
        SizedBox(
          width: double.infinity,
          height: 40,
          child: ColoredBox(
            color: Theme.of(context).colorScheme.primary,
            child: Text(
              "fill parent",
              style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
            ),
          ),
        ),
        AppSpacer.mini,
        SizedBox(
          width: 40,
          height: 40,
          child: ColoredBox(
            color: Theme.of(context).colorScheme.primary,
            child: Text(
              "40x40",
              style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
            ),
          ),
        ),
      ],
    );
  }
}

class _LimitedExample extends StatelessWidget {
  const _LimitedExample();

  @override
  Widget build(BuildContext context) {
    return const Row(
      children: [
        LimitedBox(
          maxWidth: 100,
          maxHeight: 100,
          child: Text("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"),
        )
      ],
    );
  }
}

class _ConstrainedExample extends StatelessWidget {
  const _ConstrainedExample();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        ConstrainedBox(
          constraints: const BoxConstraints(
              minWidth: 10, maxWidth: 100, minHeight: 100, maxHeight: 100),
          child: const Text(
              "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"),
        ),
      ],
    );
  }
}
